<template lang="">
    <div class="contact">
        <div class="form">
            <div class="set">填写信息</div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="您的姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="联系方式">
                    <el-input v-model="form.name" placeholder="邮箱或电话均可"></el-input>
                </el-form-item>

                <el-form-item label="反馈类别">
                    <el-select v-model="form.region" placeholder="请选择对应类别">
                        <el-option label="建议" value="shanghai"></el-option>
                        <el-option label="举报" value="beijing"></el-option>
                        <el-option label="求助" value="beijing"></el-option>
                        <el-option label="不满" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择时间">
                    <el-date-picker v-model="form.time" align="left" type="date" placeholder="选择日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>


                <el-form-item label="具体内容">
                    <el-input type="textarea" :rows="4" v-model="form.desc"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">留言</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="contactInfo">
            <div class="show">联系方式</div>
            <div class="item">It is a long fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
            <div class="item " >电话: +18082345678</div>
            <div class="item">邮箱: support@flix.hub</div>
            <div class="item">
                
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    time: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('./index.less');
</style>